<!--  -->
<template>
  <div class="icons">
                  <swiper :options="swiperOption" >
    <!-- slides -->
            <swiper-slide v-for="(page,index) in pages" :key="index">
                <div class="icon" v-for="item in page" :key="item.id">
                    <div class="icon-img">
                        <img class="icon-img-content" :src="item.imgUrl" >
                       
                    </div>          
                    <p class="icon-desc">{{ item.desc}}</p>
                </div>
             </swiper-slide>
         </swiper>
  </div>
</template>

<script>
 export default {
        name:"Icons",
        data(){
            return {
                 swiperOption: {
                    autoplay: false,                      
                },
                iconList:[{
                    id:"0001",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
                    desc:"景点门票"
                },{
                    id:"0002",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png",
                    desc:"万隆滑雪"
                },{
                    id:"0003",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png",
                    desc:"故宫"
                },{
                    id:"0004",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png",
                    desc:"静之湖滑雪滑雪"
                },{
                    id:"0005",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
                    desc:"一日游"
                },{
                    id:"0006",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
                    desc:"古北水镇"
                },{
                    id:"0007",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png",
                    desc:"北京滑雪"
                },{
                    id:"0008",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png",
                    desc:"陶然亭公园"
                },{
                    id:"0009",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
                    desc:"泡温泉"
                },{
                    id:"0010",
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png",
                    desc:"中国马镇"
                }]  

            }
        },
        computed:{
            pages(){
                //设置一个空数组   
                const  pages = [];
                this.iconList.forEach((item,index)=>{
                    //取8个元素  
                    const page =  Math.floor(index/8)                   
                    // console.log( page)
                    console.log( pages[page])
                    // 
                    if (pages[page]==undefined) {
                        pages[page] = []    
                    }
                    pages[page].push(item)
                    // console.log( pages[page])
                })
                return  pages
            }
        }
    }
</script>

<style lang="stylus" scoped>
.icons
    // overflow: hidden
    height : 0
    padding-bottom: 50%
    // background: green 
    .icon
        position: relative
        overflow: hidden
        float: left
        width: 25%
        height: 0
        padding-bottom: 25%
        // background : red  
        .icon-img
            position: absolute
            top: 0
            left: 0 
            right: 0
            bottom: .44rem
            // background :blue
            box-sizing: border-box
            padding: .05rem
            .icon-img-content
                display: block
                margin: 0 auto
                height: 100%
        .icon-desc
            position: absolute
            left: 0
            right: 0
            bottom: 0
            height: .44rem
            line-height: .44rem
            text-align: center
            color:#333
            // css3  
            // overflow hidden
            // white-space  nowrap
            // text-overflow  ellipsis
            ellipsis()

</style> 


